<%@ taglib prefix="p" uri="/WEB-INF/tld/privilege.tld" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%     
	String path = request.getContextPath();     
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";     
%> 

<%response.setHeader("cache-control","public"); %>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>运维通讯录</title>
  <base href="<%=basePath%>"/>
  <%@ include file="../../list_include.jsp"%>
  <script language="JavaScript" type="text/javascript" src="<%=basePath%>js/my97/WdatePicker.js" defer="defer"></script>
  <base target="_self" />  
  <script language="JavaScript" type="text/javascript" src="<%=basePath%>js/my97/WdatePicker.js" defer="defer"></script>
  <base target="_self" />  
  <style type="text/css"> 
	fieldset,table,tr,td {margin:0; padding:0;}
	td {padding:0 5px 0 10px;}
	form label {font-weight:bold;}
	#itemTable {margin:5px 0;}
  </style>

  <script type="text/javascript">
	$(document).ready(function() { 
       	$("#itemTable").tablesorter({theme:'green', widgets:['zebra', "resizable"]});
       	
       	$("#btn_pageUp").click(function(){
			var curPage = $("#curPage").val();
			$("#curPage").val(parseInt(curPage) - 1);
			$("#itemForm").submit();
       	});
       	
       	$("#btn_pageDown").click(function(){
       		var curPage = $("#curPage").val();
			$("#curPage").val(parseInt(curPage) + 1);
			$("#itemForm").submit();
       	});

        $("#btn_insert").click(function(){
            var queryString = $("#itemForm").formSerialize();
            queryString = encodeURIComponent(queryString);
            location.href = "<%=basePath%>req/customercontacts/insert.do?qs=" + queryString;
        });
        
        $("#btn_search").click(function(){
            $("#curPage").val(1);
            $("#itemForm").submit();
        });

        $("#btn_change").click(function(){
            var page = parseInt($("#selectPage").val());
            var curPage = parseInt($("#curPage").val());
            if(curPage == page) return;
            $("#curPage").val(parseInt(page));
            $("#itemForm").submit();
        });
	});  
	
	function edit(id) {
        var queryString = $("#itemForm").formSerialize();
        queryString = encodeURIComponent(queryString);
        location.href = "<%=basePath%>req/customercontacts/update.do?id=" + id + "&qs=" + queryString;
	}	

	function del(id){
		if(window.confirm("确定要删除吗?")){
			var queryString = $("#itemForm").formSerialize();
	        queryString = encodeURIComponent(queryString);
	        $.get("<%=basePath%>req/customercontacts/delete.do", {id:id, qs:queryString}, function(data){
	        	var result = $.parseJSON(data);
				if(result.code == 1) {
					alert("删除成功!");
					$("#btn_search").click();
				} else {
					alert(result.msg);
				}
		    });
		}
	}
  </script>
 </head>

 <body>
  <div>
    <fieldset>
      <legend>查询条件：</legend>
      <form id="itemForm" method="post" action="req/customercontacts/list.do">
        <table>
          <tr>
            <td><label for="name">客户名称：</label></td>
            <td><input type="text" name="name" id="name" value="${name}" style="width:150px;" /></td>
            <td><label for="company">公司名称：</label></td>
            <td><input type="text" name="company" value="${company }" style="width:150px;" /></td>
            <td><label for="province"></label></td>
            <td>
            	<select id="province" name="province" style="width:120px;">
            	   <option value="" style="color:red;">选择省份</option>
                   <c:forEach items="${provinces}" var="entry" varStatus="status">
                   		<option value="${entry.key }" <c:if test="${entry.key == province }">selected ="true"</c:if>>
                   		${entry.value }
                   		</option>
                   </c:forEach>
              	</select>             	
            </td>
          </tr>
          <tr>
            <td><label for="starttime">起始时间：</label></td>
            <td>
                <input type="text" id="starttime" name="starttime" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:true, maxDate:'#F{$dp.$D(\'endtime\')}'})" class="Wdate" value="${starttime}" />             
            </td>  
            <td><label for="endtime">终止时间：</label></td>
            <td>
                <input type="text" id="endtime" name="endtime" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:true,minDate:'#F{$dp.$D(\'starttime\')}'})" class="Wdate" value="${endtime}" />             
            </td>  
            <td></td>
            <td><input type="submit" id="btn_search" name="btn_search" value="查询" style="width:80px;" /></td>
          </tr>
        </table>
        <input type="hidden" name="curPage" id="curPage" value="${curPage}" />
        <input type="hidden" name="totalPage" id="totalPage" value="${totalPage}" />
      </form>
    </fieldset>
  </div>
  
  <div>
  	<table id="itemTable" class="tablesorter">
	  <thead> 
	    <tr> 
          <th width="10%">客户名称</th> 
          <th width="7%">省份</th>
          <th width="10%">公司名称</th>
          <th width="7%">职位</th>
          <th width="10%">固定电话</th>
          <th width="10%">移动电话</th>
          <th width="10%">邮箱</th>
          <th width="10%">QQ号码</th>
          <th width="10%">创建时间</th>
          <th width="10%">备注信息</th>
          <th width="6%">操作</th>
 	    </tr> 
	  </thead>
	  <tbody>
	  	<c:forEach items="${contactList}" var="item" varStatus="status">
	  	<tr>
	  	  <td style="word-wrap: break-word; word-break:break-all;">${item.name }</td>
	  	  <td style="word-wrap: break-word; word-break:break-all;">${provinces[item.province] }</td>
	  	  <td style="word-wrap: break-word; word-break:break-all;">${item.company }</td>
	  	  <td style="word-wrap: break-word; word-break:break-all;">${item.post }</td>
	  	  <td style="word-wrap: break-word; word-break:break-all;">${item.phone }</td>
	  	  <td style="word-wrap: break-word; word-break:break-all;">${item.mobile }</td>
	  	  <td style="word-wrap: break-word; word-break:break-all;">${item.email }</td>
	  	  <td style="word-wrap: break-word; word-break:break-all;">${item.qq }</td>
	  	  <td style="word-wrap: break-word; word-break:break-all;"><fmt:formatDate value="${item.createTime }" type="both" dateStyle="medium" timeStyle="medium" /></td>
	  	  <td style="word-wrap: break-word; word-break:break-all;">${item.remark }</td>
	  	  <td>
            <p:chkPri actionUrl="req/customercontacts/update.do"><a href="#" onclick="javascript:edit('${item.id}'); return false;">修改</a></p:chkPri>
            <p:chkPri actionUrl="req/customercontacts/delete.do"><a href="#" onclick="javascript:del('${item.id}'); return false;">删除</a></p:chkPri>
	  	  </td>
	  	</tr>
	  	</c:forEach>
	  </tbody>
  	</table>
  </div>
	<div style="float:left;">
        <p:chkPri actionUrl="req/customercontacts/insert.do"><input id="btn_insert" type="button" value="新增" /></p:chkPri>
  	</div>
  <div>
      <div style="text-align:right;">
        <c:if test="${curPage <= 1}"><input type="button" disabled="disabled" id="btn_pageUp" value="上一页"/></c:if>
        <c:if test="${curPage > 1}"><input type="button" id="btn_pageUp" value="上一页"/></c:if>
        <c:if test="${curPage >= totalPage}"><input type="button" id="btn_pageDown" disabled="disabled" value="下一页"/></c:if>
        <c:if test="${curPage < totalPage}"><input type="button" id="btn_pageDown" value="下一页"/></c:if>
        共${totalPage}页/共${totalRecords}条
        <select id="selectPage" style="width: auto;">
            <c:forEach var="i" begin="1" end="${totalPage}">
                <option id="${i}" <c:if test="${i == curPage}">selected="selected"</c:if>>${i}</option>
            </c:forEach>
        </select>
        <input id="btn_change" type="button" value="转至" />
      </div>
  </div>
 </body>
</html>

